<template>
    <div class="sub-left-nav">
         <h4>{{$route.meta.moduleName}}</h4>
        <el-menu
            :default-active="defaultActive"
            text-color="#555"
            :router="true"
            :default-openeds="['1']">
            <template v-for="firstNav in nav" :key="firstNav">
                <el-menu-item v-if="!firstNav.children" :index="firstNav.url">
                    <template #title>{{firstNav.title}}</template>
                </el-menu-item>
                <el-submenu v-if="firstNav.children" :index="firstNav.url">
                    <template #title>
                        {{firstNav.title}}
                    </template>
                    <el-menu-item-group >
                        <el-menu-item v-for="secondNav in firstNav.children" :key="secondNav" :index="secondNav.url">{{secondNav.title}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
    setup () {
        let nav = reactive([
            {title:'总览', url:'/systemmng/home'},
            {title:'系统用户', url:'1', children:[
                {title: '组织机构', url: '1-1'},
                {title: '系统账号', url: '/systemmng/systemuser/systemaccount'},
                {title: '系统角色', url: '/systemmng/systemuser/systemrole'},
                {title: '默认配置', url: '1-4'},
            ]},
            {title:'基础数据', url:'2', children:[
                {title: '错误信息', url: '2-1'},
                {title: '行政区划', url: '2-2'},
                {title: '词组管理', url: '2-3'},
                {title: '数据类型', url: '2-4'},
                {title: '数据字典', url: '/systemmng/systemdata'},
                {title: '后台资源', url: '2-6'},
                {title: '后台操作', url: '2-7'},
            ]},
            {title:'系统信息', url:'3', children:[
                {title: '系统配置', url: '3-1'},
                {title: '通知公告', url: '3-2'},
                {title: '帮助管理', url: '3-3'},
            ]},
        ])
        let defaultActive = ref(nav[0].url).value
        return {
            nav,
            defaultActive,
        }
    }
})
</script>

<style scoped lang="scss">

</style>